<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-if 条件渲染指令 它是根据真假来删除和插入元素  (占dom结点) -->
        <h3 v-if="flag">{{msg}}</h3>

        <!-- v-else 当条件不成立时执行的 -->
        <h3 v-if="age>=18">成年人</h3>
        <h3 v-else>未成年</h3>
        
        <hr >
        <h3 v-if="age<18">未成年</h3>
        <h3 v-else-if="age<30">有位青年</h3>
        <h3 v-else-if="age == 36 && age<60">步入中年</h3>
        <h3 v-else>进入老年</h3>
        
        <hr >
        <!-- v-else-if必须更在v-if的后面，否则将不会被识别
             v-else 必须更在v-else-if或v-if的后面，否则不会被识别
        -->
        <h3 v-if="age>=18">成年人</h3>
        <h3 v-else>未成年</h3>
        <h3 v-else-if="age==30">有位青年</h3>


    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'修饰符',
                flag:false,
                age:18
            }
        });


    </script>
</body>
</html>